import React, { Component } from 'react';
import $ from 'jquery';
import {Link} from 'react-router-dom';
import { Pagination } from 'antd';
import axios from 'axios';
import '@/components/MusicHall/album/Banner.scss'


class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
            Area:'港台',
            List:[],
            page: 0
        }
    }

    componentDidMount () {
        axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.Area+'&type=song&limit=15&offset=0')
            .then(data => {
                // console.log(data.data.data);
                this.setState({
                    List:[...data.data.data]
                })
            })
            .catch((error) => {
                // console.log(error)
            })
    }
    page () {
        // console.log($('.ant-pagination-item-active').children('a').html())
        this.setState({
            page : $('.ant-pagination-item-active').children('a').html()
        })
    }
    componentDidUpdate () {
        // console.log(this.props.area)
        // console.log(this.props.genre)
         axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.props.area+this.props.genre+this.props.Type+'&type=song&limit=15&offset='+this.state.page)
            .then(data => {
                // console.log(data.data.data);
                this.setState({
                    // List:[],
                    List:[...data.data.data]
                })
            })
    }
    render () {
        // console.log(this.props.area)
        // console.log(this.state.List)
        return (
            <div className= 'album-banner-box'>
                  <ul className= 'album-banner-ul'>{
                    this.state.List.map((item, index) => {
                        const m = parseInt(item.time/60); //分
                        // console.log(m)
                        var s = item.time - m*60 //秒
                        if (s<10) {
                        s = '0' + s
                        } 
                        return (
                            <li key={item.id}>
                            <Link to = {'/player/' + item.id}>
                                <div className='album-banner_li'>
                                    {/* 遮罩 */}
                                    <div className='cover_box'>
                                        <i className='iconfont icon-videofill'></i>
                                    </div>
                                    {/* 歌曲图片 */}
                                    <img className='album-banner_img' src= {item.pic} alt=''/>                                
                                </div>
                                {/* 歌曲名 */}
                                <h2>{item.name}</h2>
                            </Link> 
                           
                                {/* 歌手 */}
                                <p>{item.singer}</p>
                                {/* 时间 */}
                                <span>{m}:{s}</span>
                            </li>
                        )
                    })
                  }                  
                  </ul>
                  {/* 分页 */}
                  <div className='pagination' onClick={this.page.bind(this)}>
                    <Pagination defaultCurrent={1} total={100}  hideOnSinglePage={true}/>
                  </div>
                  
            </div>
        )
    }
}

export default Banner;